/* eslint-disable react/jsx-key */
import { Drawer, message, Spin, Timeline } from 'antd';
import dayjs from 'dayjs';
import moment from 'moment';
import { useEffect, useState } from 'react';
import type { operations, ReservationOrderListItem } from '../data';
import { getOrderDetail } from '../service';

interface DetailDrawerProps {
  visible: boolean;
  onClose: () => void;
  id?: string;
}

const desTextStyle = { marginTop: 12, fontSize: 16 };

export default (props: DetailDrawerProps) => {
  const { visible, onClose, id } = props;
  const [loading, setLoading] = useState<boolean>(false);

  const [detailData, setDetailData] = useState<ReservationOrderListItem>();
  const getDetailData = async (orderId?: string) => {
    if (orderId) {
      const res = await getOrderDetail(orderId);
      setLoading(false);
      if (!res.success) {
        message.error(`获取订单详情失败, ${res.msg}`);
        return;
      }
      setDetailData(res.data);
    }
  };

  useEffect(() => {
    setLoading(true);
    getDetailData(id);
  }, [id]);
  const countTimes = (start_time?: string, end_time?: string) => {
    let timeDiff_minutes = moment(end_time).diff(moment(start_time), 'minutes');
    if (timeDiff_minutes < 0) {
      return '-';
    }
    if (moment(end_time).diff(moment(start_time), 'seconds') % 60 != 0) {
      timeDiff_minutes += 1;
    }
    if (timeDiff_minutes % 60 > 0) {
      const timeDiff = `${Math.floor(timeDiff_minutes / 60)}小时${timeDiff_minutes % 60}分钟`;
      return timeDiff;
    } else if (timeDiff_minutes % 60 == 0) {
      const timeDiff = `${timeDiff_minutes / 60}小时0分钟`;
      return timeDiff;
    } else {
      return '---';
    }
  };
  const countTimeDiff = (startTime?: string, endTime?: string) => {
    if (startTime != undefined && endTime != undefined) {
      return countTimes(startTime, endTime);
    } else if (startTime == undefined) {
      return '车辆未入场';
    } else if (endTime == undefined) {
      return countTimes(startTime, dayjs().format('YYYY-MM-DD HH:mm:ss'));
    } else {
      return ' ';
    }
  };

  const parkTime = () => {
    if (detailData?.order_status == 5) {
      return '订单已取消';
    }
    return detailData?.duration_time || countTimeDiff(detailData?.actual_arrival_time, undefined);
  };
  // actual_arrival_time
  return (
    <Drawer visible={visible} size="large" title={`${id} 订单详情`} onClose={onClose} width="460px">
      <Spin spinning={loading}>
        {detailData?.operations && (
          <Timeline>
            {detailData?.operations?.map((item: operations) => (
              <Timeline.Item>
                {item.name} {item.operation_time}
              </Timeline.Item>
            ))}
          </Timeline>
        )}
        <div>
          <div style={{ fontSize: 17 }}>停车场名称: {detailData?.zone_name}</div>
          <div style={desTextStyle}>车位号: {detailData?.space_name}</div>
          <div style={desTextStyle}>手机号: {detailData?.mobile}</div>
          <div style={desTextStyle}>预约入场时间: {detailData?.start_date}</div>
          <div style={desTextStyle}>停车时长: {parkTime()}</div>
          <div style={desTextStyle}>
            预约金额(元):{' '}
            {detailData?.total_reserve_fee
              ? Number(detailData?.total_reserve_fee).toFixed(2)
              : '0.00'}
            元
          </div>
          <div style={desTextStyle}>
            实缴金额(元):{' '}
            {detailData?.paid_reserve_fee
              ? Number(detailData?.paid_reserve_fee).toFixed(2)
              : '0.00'}
            元
          </div>
        </div>
      </Spin>
    </Drawer>
  );
};
